<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Insert title here</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="/css/component.css"/>
    <link rel="stylesheet" type="text/css" href="/css/content.css"/>
    <script src="/js/modernizr.custom.js"></script>
    <script>
        function login() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/login",//url
                data: {username: $('#username').val(), password: $('#password').val()},
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result !=null) {
                        alert(result.msg)
                        window.location.href = "/user/loginSuccess"
                    }
                    ;
                },
                error: function () {
                    alert("异常！");
                }
            });
        }
        function register() {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/register",//url
                data: $('#registerForm').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result !=null) {
                        alert(result.msg)
                        window.location.href = '/user/list';
                    }
                },
                error: function () {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>
<section>
    <div class="mockup-content">
        <div class="morph-button morph-button-modal morph-button-modal-2 morph-button-fixed">
            <button type="button">登录</button>
            <div class="morph-content">
                <div>
                    <div class="content-style-form content-style-form-1">
                        <span class="icon icon-close">Close the dialog</span>
                        <h2>登录</h2>
                        <form id="loginForm" onsubmit="return false" action="##" method="post">
                            <p><label>用户名</label><input id="username" type="text"/></p>
                            <p><label>密码</label><input id="password" type="password"/></p>
                            <p>
                                <button onclick="login()">登录</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- morph-button -->
        <strong class="joiner">or</strong>
        <div class="morph-button morph-button-modal morph-button-modal-3 morph-button-fixed">
            <button type="button">注册</button>
            <div class="morph-content">
                <div>
                    <div class="content-style-form content-style-form-2">
                        <span class="icon icon-close">Close the dialog</span>
                        <h2>注册</h2>
                        <form id="registerForm" onsubmit="return false" action="##" method="post">
                            <p><label>用户名</label><input name="name" type="text"/></p>
                            <p><label>密码</label><input name="password" type="password"/></p>
                            <p><label>地址</label><input name="address" type="text"/></p>
                            <p>
                                <button onclick="register()">注册</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- morph-button -->
    </div><!-- /form-mockup -->
</section>
<script src="/js/classie.js"></script>
<script src="/js/uiMorphingButton_fixed.js"></script>
<script>
    (function () {
        var docElem = window.document.documentElement, didScroll, scrollPosition;

        // trick to prevent scrolling when opening/closing button
        function noScrollFn() {
            window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
        }

        function noScroll() {
            window.removeEventListener('scroll', scrollHandler);
            window.addEventListener('scroll', noScrollFn);
        }

        function scrollFn() {
            window.addEventListener('scroll', scrollHandler);
        }

        function canScroll() {
            window.removeEventListener('scroll', noScrollFn);
            scrollFn();
        }

        function scrollHandler() {
            if (!didScroll) {
                didScroll = true;
                setTimeout(function () {
                    scrollPage();
                }, 60);
            }
        };

        function scrollPage() {
            scrollPosition = {x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop};
            didScroll = false;
        };

        scrollFn();

        [].slice.call(document.querySelectorAll('.morph-button')).forEach(function (bttn) {
            new UIMorphingButton(bttn, {
                closeEl: '.icon-close',
                onBeforeOpen: function () {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterOpen: function () {
                    // can scroll again
                    canScroll();
                },
                onBeforeClose: function () {
                    // don't allow to scroll
                    noScroll();
                },
                onAfterClose: function () {
                    // can scroll again
                    canScroll();
                }
            });
        });

        // for demo purposes only
        [].slice.call(document.querySelectorAll('form button')).forEach(function (bttn) {
            bttn.addEventListener('click', function (ev) {
                ev.preventDefault();
            });
        });
    })();
</script>
<h2>用户列表</h2>
<a href="#" th:href="@{/file/upload}" class="btn btn-primary btn-lg active"
       role="button">上传文件</a></a>
<table class="table table-striped">
    <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>年龄</th>
        <th>地址</th>
        <th>操作</th>
    </tr>
    <tr th:each="user:${users}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.age}"></td>
        <td th:text="${user.address}"></td>
        <td><a href="#" th:href="@{/user/delete(uid=${user.id})}" class="btn btn-primary btn-lg active"
               role="button">删除</a></td>
    </tr>
</table>
</body>
</html>